<template>
  <div class="container mx-auto w-4/5 py-4">
    <!-- 顶部区域 -->
    <a-row :gutter="24" class="mb-8 h-[300px]" id="topSection">
      <a-col :span="14">
        <a-typography class="mb-4">
          <a-typography-title :level="2" id="mainTitle" class="!text-2xl !mt-5"> 打通社群私域运营 </a-typography-title>
          <a-typography-text id="subtitle" class="!text-5xl !block !my-5">
            <span class="!text-red-500">笔记圈</span>
            <span class="!text-black">学习分享社群系统</span>
          </a-typography-text>
        </a-typography>

        <a-space id="inputSection">
          <a-input id="phoneInput" placeholder="请输入手机号" class="w-64" size="large" />
          <a-button id="experienceButton" type="primary" class="!bg-black !text-white !ml-2" size="large"> 免费体验 </a-button>
        </a-space>
      </a-col>

      <a-col :span="10">
        <img id="rightImage" src="https://picsum.photos/id/237/520/260" alt="展示图" class="w-full h-48 object-cover" />
      </a-col>
    </a-row>

    <!-- 卡片区域 -->
    <a-row :gutter="24" id="cardSection">
      <a-col v-for="n in 3" :key="n" :span="8">
        <a-card :id="`card${n}`" class="!w-full h-64">
          <a-card-cover>
            <img :id="`cardImage${n}`" src="https://picsum.photos/id/237/520/260" class="!w-full !h-24 !rounded-lg" />
          </a-card-cover>

          <a-typography class="mt-2">
            <a-typography-title :id="`cardTitle${n}`" :level="4" class="!text-lg !mb-2"> 微信私域流量运营工具大全 </a-typography-title>

            <a-typography-text :id="`cardContent${n}`" class="!text-sm !line-clamp-2">
              微信生态内的多流量触点便追案演变成私域流量的载体，公众号，小程序，社群，个人号...
              <span :id="`detailButton${n}`" class="!p-0 !text-cyan-400"> 查看详情 </span>
            </a-typography-text>
          </a-typography>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
  
<script setup lang="jsx">
    const stats = [
      { number: '20万+', label: '优质用户' },
      { number: '5000万+', label: '终端学员' },
      { number: '1亿+', label: '安全流水' },
      { number: '7000万+', label: '内容产出' },
    ];
  </script>
  
<style>
/* 使用Tailwind覆盖默认样式 */
.ant-card-body {
  @apply p-4;
}
.ant-typography {
  @apply mb-0;
}
</style>
  